<template>
  <div>
    <!--取消备注-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose6"
      title="取消备注"
      :visible.sync="dialogVisible6"
      width="400px">
      <el-form :model="remarkForm2" size="mini" label-width="120px"  ref="remarkForm2" :rules="rules3">
        <el-form-item label="取消类型：" prop="remarkTypeStr">
          <el-select v-model="remarkForm2.remarkTypeStr" class="input-width" style="width:195px" placeholder="请选择" @change="changeRemark">
            <el-option :value="item.cddValue" :label="item.cddValue" :key="item.cddValue" v-for="item in remarkList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新销售订单号：" prop="newOrderSn" v-if="remarkForm2.remarkTypeStr == '更换公司抬头' || remarkForm2.remarkTypeStr == '重新下单'">
           <el-input v-model="remarkForm2.newOrderSn"></el-input>
        </el-form-item>
        <el-form-item label="取消原因：" prop="remark">
          <el-input v-model="remarkForm2.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose6">取 消</el-button>
          <el-button type="primary" @click="handleConfirm6" :loading="btnLoading7">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import {ordersRemark,getCustomerSetting,cancelOrderApply} from '@/api/partner'

import {formatDate} from '@/utils/date';
import store from '@/store'

import { mapGetters } from 'vuex'



const defaultRemarkForm = {
  remarkTypeStr:'',
  remark:'',
  newOrderSn:'',
};
export default {
  name: "cancelOrder",
  data(){
    return {
      dialogVisible6:false,
      btnLoading7:false,
      remarkForm2:JSON.parse(JSON.stringify(defaultRemarkForm)),
      cancelType:'',
      remarkList:[],
      rules3:{
        remarkTypeStr:[{required: true, trigger: 'change' ,message: '请选择备注类型',}],
        remark:[{required: true, trigger: 'blur' ,message: '请输入备注',}],
        newOrderSn:[{required: true, trigger: 'blur' ,message: '请输入新的销售订单号',}]
      },
      orderId:''

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{
    changeRemark(){
      if(this.remarkForm2.remarkTypeStr == '现汇改承兑'){
        this.remarkForm2.remark = '此现汇订单因客户需要改为承兑订单'
      }else{
        this.remarkForm2.remark = ''
      }
    },
    //显示备注弹窗
    showPop(type,orderId){ //type:0 正式订单取消 1 意向合同取消
      this.dialogVisible6 = true;
      this.remarkForm2.remark = '';
      this.remarkForm2.remarkTypeStr = '';
      this.cancelType = type
      this.orderId = orderId
      this.getRemarkList()
    },
    //关闭备注弹窗
    handleClose6(){
      this.dialogVisible6 = false;
      this.$refs.remarkForm2.clearValidate();
    },
    //提交备注
    handleConfirm6(){
      this.$refs['remarkForm2'].validate((valid) => {
        if (valid) {
          this.btnLoading7 = true;
          let fn = ordersRemark
          let data = {
            orderId:this.orderId,
            remark:this.remarkForm2.remark,
            remarkTypeStr:this.remarkForm2.remarkTypeStr,
            isCancelReason:1
          }
          if(this.cancelType == 1  || this.cancelType == 0){ //合同取消
            data = {
              orderId:this.orderId,
              remark:this.remarkForm2.remark,
              remarkTypeStr:this.remarkForm2.remarkTypeStr,
            }
            if(this.remarkForm2.remarkTypeStr == '更换公司抬头' || this.remarkForm2.remarkTypeStr == '重新下单'){
              data.newOrderSn = this.remarkForm2.newOrderSn
            }
            fn = cancelOrderApply
          }
          fn(data).then(()=>{
            this.btnLoading7 = false;
            this.dialogVisible6 = false;
            this.$emit('update')
          }).catch(()=>{
            this.btnLoading7 = false;
          })
        }
      })
    },
    //获取备注类型
    getRemarkList(){
      getCustomerSetting({orderId:this.orderId}).then((res) => {
        res.forEach((el) => {
          if (el.cdtCode == 'remark_type_str') {
            this.remarkList = el.data
            this.remarkList = this.remarkList.filter(item => {
              return item.cddType == this.cancelType
            })
          }
        });
      })
    },
  },
}
</script>

<style lang="scss">

</style>
